<script setup>
import { ref, defineProps } from 'vue'
import axios from 'axios'

defineProps({
  isDark: Boolean
})

// 小程序配置数据模型
const weappConfig = ref({
  appId: '',
  appSecret: '',
  version: '1.0.0',
  description: '',
  downloadUrl: ''
})

// 二维码生成参数
const qrCodeParams = ref({
  path: 'pages/index/index',
  width: 430
})

// 二维码图片URL
const qrCodeImage = ref('')

// 保存配置
const saveConfig = () => {
  console.log('保存小程序配置:', weappConfig.value)
  // TODO: 调用API保存配置
}

// 生成小程序二维码
const generateQRCode = async () => {
  try {
    const response = await axios.post('https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode', {
      path: qrCodeParams.value.path,
      width: qrCodeParams.value.width
    }, {
      params: {
        access_token: 'YOUR_ACCESS_TOKEN' // 需要替换为实际access_token
      },
      responseType: 'blob'
    })
    
    const imageUrl = URL.createObjectURL(response.data)
    qrCodeImage.value = imageUrl
  } catch (error) {
    console.error('生成二维码失败:', error)
    alert('生成二维码失败，请检查配置')
  }
}
</script>

<template>
  <div class="weapp-management">
    <h2>小程序管理</h2>
    
    <el-tabs type="border-card">
      <el-tab-pane label="基本配置">
        <el-form :model="weappConfig" label-width="120px">
      <el-form-item label="AppID">
        <el-input v-model="weappConfig.appId" placeholder="请输入小程序AppID"></el-input>
      </el-form-item>
      
      <el-form-item label="AppSecret">
        <el-input v-model="weappConfig.appSecret" placeholder="请输入小程序AppSecret"></el-input>
      </el-form-item>
      
      <el-form-item label="版本号">
        <el-input v-model="weappConfig.version"></el-input>
      </el-form-item>
      
      <el-form-item label="版本描述">
        <el-input 
          v-model="weappConfig.description"
          type="textarea"
          :rows="3"
          placeholder="请输入版本更新描述">
        </el-input>
      </el-form-item>
      
      <el-form-item label="下载地址">
        <el-input v-model="weappConfig.downloadUrl" placeholder="请输入小程序下载地址"></el-input>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="saveConfig">保存配置</el-button>
      </el-form-item>
        </el-form>
      </el-tab-pane>
      
      <el-tab-pane label="二维码生成">
        <el-form :model="qrCodeParams" label-width="120px">
          <el-form-item label="页面路径">
            <el-input v-model="qrCodeParams.path" placeholder="例如: pages/index/index"></el-input>
          </el-form-item>
          
          <el-form-item label="二维码宽度">
            <el-input-number v-model="qrCodeParams.width" :min="280" :max="1280"></el-input-number>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="generateQRCode">生成二维码</el-button>
          </el-form-item>
          
          <el-form-item v-if="qrCodeImage">
            <h4>生成结果：</h4>
            <img :src="qrCodeImage" style="max-width: 100%; border: 1px solid #eee;">
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>
.weapp-management {
  padding: 20px;
}
</style>
